<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="back"><i class="zmdi zmdi-arrow-left"></i>&nbsp;&nbsp;返回列表</el-button>
          <!--<el-button v-if="!isLoading" type="primary" @click="handleEdit"><i class="zmdi zmdi-edit"></i>&nbsp;&nbsp;编 辑</el-button>
          <el-button v-if="!isLoading" type="warning" @click="handleDelete"><i class="zmdi zmdi-delete"></i>&nbsp;&nbsp;删 除</el-button>-->
          <el-button type="text" :loading="isLoading"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card-body card-padding">
      <el-tabs active-name="content">
        <el-tab-pane label="图文介绍" name="content">
          <el-row :gutter="20">
            <el-col :span="5">
              <div style="text-align: center"><img class="title-img" alt="" :src="curObject.title_image"></div>
                </el-col>
            <el-col :span="6">
              <div class="content-left">
                <div class="block">
                  <dl class="dl-horizontal">
                    <dt>ID编号</dt>
                    <dd>{{curObject.id}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>活动名称</dt>
                    <dd>{{curObject.title}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>活动地点</dt>
                    <dd>{{curObject.address}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>区域编码</dt>
                    <dd>{{curObject.area_code}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>开始时间</dt>
                    <dd>{{curObject.start_time}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>结束时间</dt>
                    <dd>{{curObject.end_time}}</dd>
                  </dl>
                </div>
                <div class="block">
                  <dl class="dl-horizontal">
                    <dt>参与价格</dt>
                    <dd>{{curObject.price}}(元)</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>最多报名人数</dt>
                    <dd>{{curObject.entry_limit}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>已报名人数</dt>
                    <dd>{{curObject.entry_count}}</dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>浏览人数</dt>
                    <dd>{{curObject.view_count}}</dd>
                  </dl>
                </div>
                <div class="block">
                  <dl class="dl-horizontal">
                    <dt>是否首页推荐</dt>
                    <dd>
                      {{curObject.in_first===1?"是":"否"}}
                      <el-button v-if="curObject.in_first===1" type="text" size="mini" @click="handleInFirst(0)">取消推荐</el-button>
                      <el-button v-if="curObject.in_first===0" type="text" size="mini" @click="handleInFirst(1)">设置推荐</el-button>
                    </dd>
                  </dl>
                  <dl class="dl-horizontal">
                    <dt>状态</dt>
                    <dd>
                      {{this.verifyToString(curObject.verify_status)}}
                    </dd>
                  </dl>
                </div>
              </div>
            </el-col>
            <el-col :span="13">
              <div class="content-body" v-html="curObject.introduction"></div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="评论列表" name="comment">
          <info-comment v-bind:cur-id="curId" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import API from '../../api'
  import InfoComment from './activity-comment.vue'
  import mixin from './activity-mixin'

  export default {
    mixins: [mixin],
    components: {
      'info-comment': InfoComment
    },
    data: function () {
      return {
        curId: '',
        curObject: {},
        isLoading: false
      }
    },
    created: function () {
      this.curId = this.$route.params.id
      this.fetchData()
    },

    methods: {
      back: function () {
        this.$router.replace('/activity/list')
      },

      handleEdit: function () {
        this.$router.push('/activity/list/edit/' + this.curId)
      },

      fetchData: function () {
        this.isLoading = true
        var params = { 'id': this.curId }
        API.activityInfo(params,
          (data) => {
            this.isLoading = false
            if (!data) return
            this.curObject = data
            var breadcrumbs = []
            breadcrumbs.push({
              index: this.$route.path,
              name: data.name
            })
            this.$store.dispatch('updateBreadcrumb', breadcrumbs)
          }
        )
      },
      handleInFirst: function (inFirst) {
        var params = { 'id': this.curId, 'in_first': inFirst }
        API.activityInFirst(params,
          (data) => {
            this.curObject.in_first = inFirst
          }
        )
      },
      handleDelete: function () {
        this.$confirm('你将删除该活动, 是否继续?', '提示', {
          closeOnClickModal: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.activityDelete({ id: this.curObject.id },
            (data) => {
              if (!data) return
              this.back()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      statusFormatter: function (status) {
        switch (status) {
          case 1: return '正在审核'
          case 2: return '审核通过'
          case 3: return '审核不通过'
          default: return '正在审核'
        }
      }
    },

    beforeRouteLeave: function (to, from, next) {
      this.$store.dispatch('updateBreadcrumb', [])
      next()
    }
  }

</script>

<style scoped>
  image {
    max-width: 100%!important
  }

  .content-left {
    border-right: 2px solid #eee;
    padding: 0px 10px 0px 10px
  }

  .title-img {
    min-width: 100px;
    min-height: 100px;
    max-width: 300px;
    max-height: 300px;
    border-radius: 3px;
    margin-bottom: 10px;
  }

  .content-body {
    display: table-cell;
    padding: 0px 10px 0px 10px
  }

.block{
  margin-bottom:20px;
}

  dt {
    width: 150px;
  }
  dd {
    margin-left: 155px;
  }
</style>
